
<template>
  <el-container >
    <el-header class="no-flex" height="auto">
      <el-form size="default" inline :model="searchForm" label-width="70px">
        <el-form-item label="用户账号"  >
          <el-input v-model="searchForm.title" placeholder="请输入用户账号" :clearable="true" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="ip地址"  >
          <el-input v-model="searchForm.operName" placeholder="请输入登陆ip地址" :clearable="true" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="ip归属地"  >
          <el-input v-model="searchForm.operName" placeholder="请输入登陆ip归属地" :clearable="true" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="操作时间" >
          <el-date-picker style="width: 200px"
                          v-model="chooseTime"
                          type="datetimerange"
                          range-separator="-"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          clearable
                          value-format="YYYY-MM-DD HH:mm:ss"
                          @change="handleChange"
          />
        </el-form-item>
        <el-form-item  >
          <el-button type="primary" icon="el-icon-search"  @click="upsearch">
            搜索
          </el-button>
          <el-button type="default" icon="el-icon-RefreshLeft" @click="reset">
            重置
          </el-button>
        </el-form-item>
          <el-form-item style="display: flex; margin-bottom: 0">
            <el-button type="danger" :disabled="selection.length == 0" icon="el-icon-delete" @click="del">
             删除
            </el-button>
            <el-button type="danger" icon="el-icon-delete" @click="clean">
              清空
            </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main class="nopadding">
      <el-table ref="table" row-key="id" @selection-change="selectionChange" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" hide-do :data="tableData">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="用户账号" prop="userName" width="175"></el-table-column>
        <el-table-column label="登陆IP" prop="ipaddr" width="175"></el-table-column>
        <el-table-column label="登陆地点" prop="loginLocation" width="175"></el-table-column>
        <el-table-column label="浏览器" prop="browser" width="175"></el-table-column>
        <el-table-column label="操作系统" prop="os"></el-table-column>
        <el-table-column label="提示消息" prop="msg" width="175"></el-table-column>
        <el-table-column label="访问时间" prop="loginTime" width="175"></el-table-column>
      </el-table>
    </el-main>
    <el-footer style="display: flex;justify-content: flex-end">
      <el-pagination
        v-model:current-page="searchForm.currentPage"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>

</template>

<script>
export default {
  name: 'loginlog',
  data() {
    return {
      dialog: {
        save: false
      },
      chooseTime:null,
      total:0,
      searchForm:{
        current:1,
        size:10,
        userName:"",//用户账号
        ipaddr:"",//登录IP地址
        loginLocation:"",//登录IP归属地
        beginTime:"",//操作时间范围开始
        endTime:"",//操作时间范围结束
      },
      selection: [],
      search: {
        keyword: null
      },
      tableData:[],
      enabled:null,
      options:[
        {
          enabled: 1,
          label: '启用',
        },
        {
          enabled: 0,
          label: '停用',
        },

      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 请求数据
    async getData(){
      let res = await this.$API.log.loginlog.list.get(this.searchForm)
      this.tableData = res.data.records;
      this.total = res.data.total;
    },
    // 时间选择
    handleChange(val){
      this.searchForm.beginTime= val[0]
      this.searchForm.endTime= val[1]
    },
    //切换分页
    handleCurrentChange(e){
      this.searchForm.current = e;
      this.getData()
    },
    // 改变单页显示数量
    handleSizeChange(e){
      this.searchForm.size = e
      this.pagi.pageSize =e
      this.getData()
    },
    // 转换时间
    rendererDateTime(row, column, cellValue, index){
      return this.$TOOL.dateFormat(cellValue)
    },
    //删除
    async del(){
      let res = await this.$API.log.loginlog.del.post(this.selection)
      if(res.code == 200){
        this.$message.success('删除成功')
        this.tableData = []
        this.getData()
      } else{
        this.$message.error('删除失败')
      }
    },
    //清空
    async clean(){
      let res = await this.$API.log.operatelog.clean.get()
      if(res.code == 200){
        this.$message.success('清空成功')
        this.tableData = []
        this.getData()
      } else{
        this.$message.error('清空失败')
      }
    },
    //编辑
    table_edit(row){
      // console.log(row)
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('edit').setData(row)
      })
    },
    //删除
    async table_del(row){
      let res = await this.$API.system.config.del.get(row.id)
      if(res.code == 200){
        this.$message.success('删除成功')
        this.tableData = []
        this.getData()
      } else{
        this.$message.error('删除失败')
      }
    },
    //表格选择后回调事件
    selectionChange(selection){
      selection.forEach((item,index)=>{
        if(this.selection.indexOf(item.id) == -1){
          this.selection.push(item.id)
        }
      })
    },
    //搜索
    async upsearch(){
      this.getData()
    },
    //重置功能
    reset(){
      this.searchForm={
        current:1,
        size:10,
        userName:"",//用户账号
        ipaddr:"",//登录IP地址
        loginLocation:"",//登录IP归属地
        beginTime:"",//操作时间范围开始
        endTime:"",//操作时间范围结束
      },
      this.tableData=[];
      this.getData()
    },
    //本地更新数据
    handleSaveSuccess(data, mode){
      if(mode =='add'){
        this.tableData = []
        this.getData()
      }else if(mode =='edit'){
        this.tableData=[]
        this.getData()
      }
    }
  }
}
</script>

<style scoped>

</style>
